<script setup lang="ts">
import { computed } from 'vue'
import type { Node } from '@/types/schema'
import Renderer from './Renderer.vue'

const props = defineProps<{ node: Node }>()
const emit = defineEmits<{ (e: 'select', id: string): void }>()

const style = computed(() => ({
  padding: props.node.props.padding || '16px',
  backgroundColor: props.node.props.bgColor || 'transparent',
  border: props.node.props.border ? '1px dashed #ccc' : 'none'
}))
</script>

<template>
  <div class="tm-container" :style="style">
    <Renderer
      v-for="child in node.children"
      :key="child.id"
      :node="child"
      @select="$emit('select', child.id)"
    />
  </div>
</template>

<style scoped>
.tm-container {
  min-height: 60px;
  margin: 8px 0;
}
</style>
